<template>
  <div class="pro">
    <h2>产品页面</h2>
    <StepA></StepA>
    <keep-alive>
        <component :is="cname"></component>
    </keep-alive>
    
    <button @click="changeCard">点击切换卡牌</button>
    <hr />
    <SlotChild>
        <!-- <h3>我是一个插槽的内容 - 匿名插槽</h3> -->
        <!-- <h3 slot="jack">我是另外一个插槽 - 具名插槽</h3> -->
        <div slot-scope="props">
            <ul>
                <li v-for="(item, index) in props.prolsit" :key="'pro'+index">
                    {{ item }}
                </li>
            </ul>
        </div>
    </SlotChild>
  </div>
</template>

<script>
import StepA from '../components/StepA.vue'
import StepB from '../components/StepB.vue'
import StepC from '../components/StepC.vue'
import SlotChild from '../components/SlotChild.vue'
export default {
    data(){
        return {
            cname: 'StepC'
        }
    },
    components: {
        StepA,
        StepB,
        StepC,
        SlotChild
    },
    methods: {
        changeCard(){
            if(this.cname === "StepA"){
                this.cname = "StepB";
                return;
            }
            if(this.cname === "StepB"){
                this.cname = "StepC";
                return;
            }
            if(this.cname === "StepC"){
                this.cname = "StepA";
                return;
            }
        }
    }
}
</script>

<style>

</style>